<template>
  <uv-popup closeable ref="popup" mode="center" round="10" @change="closeChange" :closeOnClickOverlay="false">
      <div style="overflow-y: auto;max-height: 85vh;min-width: 85vw;" class="p1756879647">
        <div class="fz44 pt30 pb30" style="font-weight: 500;">骑士发起线上支付 <div style="display: inline;color: #E60012;">
            ¥{{taskForm.advance_payment_price}}</div>
        </div>
        <div class="fz30  " style="color: #595757;">您的商品骑士已完成购买，您可以查看 <div style="display: inline;color: #E60012;">购物小票</div> 和 <div
            style="display: inline;color: #E60012;">支付凭证</div>，
          请为了保障您的交易，请及时完成 <div style="color: #E60012;display: inline;">线上支付</div>，
          <div style="display: inline;color: #E60012;">切勿线下转账</div>。
        </div>
        <div class="pt30 p1756889184 pb30">
          <uv-upload :deletable="false" style="line-height:1;" :fileList="fileList" name="6"
            :maxCount="fileList.length">
            <div class="p1756879768 fac jcc">
              <uv-icon size="70rpx" color="#979898" name="camera"></uv-icon>
              <div class="fz24 pt10 " style="line-height:1;color: #979898;">上传图片</div>
            </div>
          </uv-upload>
        </div>
        <button @click="payPriceTap" class="p1756191456 common-button fz36   "
          style="width: 100%;color: #fff;background-color: #E60012!important;">立即支付 ¥{{taskForm.advance_payment_price}}</button>
      </div>


  </uv-popup>
</template>
<script>
  import { payGoodsPrice } from '@/api';
  export default {
    components: {
    },
    props: {
      taskForm: {
        type: Object,
        default: {}
      },
    },
    data() {
      return {
        advance_payment_price: null,
        fileList: []
      }
    },
    methods: {
      payPriceTap() {
        this.$emit('success')
      },
      openFun() {
        this.$refs.popup.open()
       this.$nextTick(() => {
         if (this.taskForm.type == 3 && this.taskForm.service_status == 3 && this.taskForm.advance_payment_images &&  this.taskForm.advance_payment_images.length) {
          this.fileList = JSON.parse(JSON.stringify(this.taskForm.advance_payment_images)).map(i => {
            return {
              url: i
            }
          })

        }
       })
      },
      closeChange() {
        this.fileList = []
        this.advance_payment_price = null
        this.showPay = false
      },
      closeTap(value) {
        this.$refs.popup.close()
      },
    },
  }
</script>
<style lang="scss" scoped>
@import '../common.scss';
  .p1756792635 {
    color: #333;
    background-color: #fff;
    width: 84vw;
    padding: 0 30rpx 60rpx 30rpx;
    box-sizing: border-box;
  }

  .p1756792832 {
    max-height: 330rpx;
    height: 330rpx;
  }

  .p1756792740 {
    background: #F7F7F7;
    border-radius: 10rpx;
    margin-bottom: 30rpx;
  }

  .p1756792950 {
    width: 5rpx;
    height: 5rpx;
    min-width: 5rpx;
    min-height: 5rpx;
    background: #727171;
    border-radius: 50%;
    margin-right: 20rpx;
  }

  .p1756191456 {
    height: 100rpx;
    border-radius: 30rpx;

    box-sizing: border-box;
    margin-top: 30rpx;
    overflow: hidden !important;
  }

  .p1756879647 {
    width: 85vw;
    padding: 90rpx 30rpx 60rpx 30rpx;
    box-sizing: border-box;
  }

  .p1756879768 {
    flex-direction: column;
    border: 2rpx solid #c7c7c7;
    border-radius: 10rpx;
    width: calc(28vw - 33rpx);
    height: calc(28vw - 33rpx);
  }
</style>